<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <button class="layui-btn layui-col-md1" id="back" ><i class="layui-icon">&#xe65c;</i>返回</button>
    </div>
    <hr/>

    <form class="layui-form">
        <input type="hidden" name="id" th:value="${goodsTypeSmall==null? null:goodsTypeSmall.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">子分类名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入子分类名"
                       class="layui-input" th:value="${goodsTypeSmall==null? null:goodsTypeSmall.name}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属大类</label>
            <div class="layui-input-block">
                <select name="goodsTypeId" >
                    <option th:each="goodsTypeBig : ${goodsTypeBigList}"
                            th:value="${goodsTypeBig.id}" th:text="${goodsTypeBig.name}" th:selected="${goodsTypeSmall==null? false:goodsTypeBig.id==goodsTypeSmall.goodsTypeId}"></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">上传图片</label>
            <div class="layui-input-inline">
                <img alt="标题图片" src="wxui/images/goodsType/phone/daping.jpg" th:src="${goodsTypeSmall==null? 'wxui/images/goodsType/phone/daping.jpg':goodsTypeSmall.img}" class="layui-nav-img" id="titleImg"/>
                <button type="button" class="layui-btn" id="uploadimg">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <input type="hidden" name="img" th:value="${goodsTypeSmall==null? 'wxui/images/goodsType/phone/daping.jpg':goodsTypeSmall.img}" id="imgsrc" />
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <script type="text/javascript">
        layui.use(['form', 'layer', 'upload'], function () {
            var form = layui.form;
            var upload = layui.upload;
            $ = layui.jquery;
            layer = layui.layer;

            form.render(); //更新全部


            /*****************************
             * @Description: 文件上传
             * @Param:
             * @return:
             * @Author: 刘涛
             * @Date: 2018/3/14
             *******************************/
            var uploadInst = upload.render({
                elem: '#uploadimg' //绑定元素
                ,
                url: 'user/upLoadFile' //上传接口
                ,
                done: function (res) {
                    //上传完毕回调
                    $("#titleImg").attr("src",res.data);
                    $("#imgsrc").val(res.data);
                },
                error: function () {
                    //请求异常回调
                }
            });

            /*****************************
             * @Description: 表单提交
             * @Param:
             * @return:
             * @Author: 刘涛
             * @Date: 2018/3/14
             *******************************/
            form.on('submit(*)', function (data) {
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.ajax({
                    url: "type/smallAddOrEdit",
                    dataType: "json",
                    data: data.field,
                    type: "post",
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg(data.msg+'页面稍后跳转', {icon: 1, anim: 1});
                            setTimeout('$("#content-body").load("type/goTypemgr")',3000);
                        } else {
                            layer.msg(data.msg, {icon: 2, anim: 6});
                        }
                    }
                })

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            /**
             * 返回按钮
             * */
            $("#back").click(function () {
                $("#content-body").load("type/goTypemgr");
            })

        });
    </script>
</div>
</body>
</html>